<template>
  <div class="personal">
    <div class="head">
      <van-nav-bar
        title="个人中心"
        left-text
        left-arrow
        @click-left="onClickLeft"
        right-text="···"
        @click-right="onClickRight"
        fixed
      />
    </div>
    <div class="middle">
      <ul>
        <li>
          <van-skeleton avatar />
        </li>
        <li class="id">{{this.name}}</li>
        <li class="hui">
          <van-tag round type="danger">VIP</van-tag>&nbsp;&nbsp;个人会员
        </li>
        <li>
          <van-tag class="li" type="primary" @click="account">账户管理></van-tag>
        </li>
      </ul>
    </div>
    <div class="middle1">
      <van-cell @click="point" is-link>积分记录</van-cell>
      <van-cell @click="address" is-link>地址管理</van-cell>
      <van-cell is-link @click="idea">意见建议</van-cell>
      <van-cell @click="about" is-link>关于我们</van-cell>
    </div>
  </div>
</template>
<script>
export default {
  name: "personal",
  mounted() {
    this.loginpPerson();
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home");
    },
    onClickRight() {
      this.$router.push("/home");
    },
    account() {
      this.$router.push("/account");
    },
    about() {
      this.$router.push("/about");
    },
    point() {
      this.$router.push("/point");
    },
    address() {
      this.$router.push("/address");
    },
    idea() {
      this.$router.push("/idea");
    },
    loginpPerson() {
      let paramForms = {};
      this.$axios.get("prod-api/common/getLoginInfo", paramForms).then(res => {
        if (200 == res.data.code) {
          localStorage.setItem("userName", res.data.user.userName);
          this.name = res.data.user.userName;
        } else {
        }
      });
    }
  },
  data() {
    return {
      show: "",
      name: ""
    };
  }
};
</script>
<style lang="scss" scoped>
.personal {
  position: relative;
  background-color: #f4f5f7;
  height: 800px;

  .van-nav-bar {
    background-image: url("../assets/bg2.png");
  }
  .head {
    height: 200px;
    background-image: url("../assets/bg2.png");
  }
  .van-nav-bar__text {
    color: #ffffff;
  }
  .middle {
    position: absolute;
    top: 12%;
    left: 2%;
    width: 95%;
    margin: 0 auto;
    height: 130px;
    border-radius: 13px;
    background-color: #ffffff;
    .van-skeleton__avatar--round {
      position: absolute;
      top: 50%;
      left: 10%;
    }
    .li {
      position: absolute;

      right: 0;
      top: 20%;
    }
    .van-tag--round {
      width: 12px;
      height: 6px;
      font-size: 2px;
      text-align: center;
      line-height: 6px;
    }
    .hui {
      color: dimgray;
      font-size: 10px;
      margin-left: 90px;
    }
    .id {
      //margin-top: 100px;
      padding-top: 50px;
      margin-left: 90px;
    }
  }
  .middle1 {
    width: 95%;
    margin: 0 auto;
    margin-top: 50px;
    border-radius: 13px;
    background-color: #ffffff;
  }
}
</style>